﻿@page "/components/image"
@page "/components/MudImage"

<DocsPage>
    <DocsPageHeader Title="Image" SubTitle="A simple component that represent the HTML img tag">
        <Description>
        </Description>
    </DocsPageHeader>

    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>
                    <CodeInline>MudImage</CodeInline> is used to embed an image in an HTML page. Images are not technically inserted into a page, but are linked to a file.<br/>
                    The component represent the <CodeInline>&#60;img&#62;</CodeInline> tag  and creates a holding space for the referenced image.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImageUsageExample)">
                <ImageUsageExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Size">
                <Description>Size can be directly set on the image with the <CodeInline>Width</CodeInline> and <CodeInline>Height</CodeInline> property, it can also be useful to set this even if you want a responsive image, setting them will make the image take up set space even before they are loaded which can be useful if your pictures takes long time to load.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImageSizeExample)">
                <ImageSizeExample />
            </SectionContent>
        </DocsPageSection>
                
        <DocsPageSection>
            <SectionHeader Title="Responsive Images">
                <Description>
                    To get responsive images set the <CodeInline>Fluid</CodeInline> property to true. This applies <CodeInline SecondaryColor="true">max-width: 100%; and height: auto;</CodeInline> so the image scales with the parent's width.<br/>
                    Resize the example bellow to see how the image scales with the parents with.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImageResponsiveExample)" Block="true" FullWidth="true">
                <DocsImagePageResizer>
                    <ImageResponsiveExample/>
                </DocsImagePageResizer>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Image Fit">
                <Description>
                    Use <CodeInline>ObjectFit</CodeInline> to controll how a image should be resized.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImageFitExample)" Block="true" ShowCode="false">
                <ImageFitExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Image Position">
                <Description>
                    With the <CodeInline>ObjectPosition</CodeInline> property you can specify how a image should be positioned within its container.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImagePositionExample)" Block="true" ShowCode="false">
                <ImagePositionExample />
            </SectionContent>
        </DocsPageSection>
 
        <DocsPageSection>
            <SectionHeader Title="Playground">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ImagePlaygroundExample)" ShowCode="false">
                <ImagePlaygroundExample />
            </SectionContent>
        </DocsPageSection>
        

    </DocsPageContent>
</DocsPage>
